Understanding the ::part() Pseudo-Element in CSS
The ::part() pseudo-element allows you to style specific parts of a Web Component's shadow DOM from outside the component. It works in combination with the part attribute inside the component's shadow DOM to expose internal elements for styling.
::part(name)targets elements inside a shadow DOM that have apart="name"attribute.It allows encapsulated components to expose certain internal elements for styling while keeping the rest of the shadow DOM private.
You can style properties like
color,background,padding,border, and more on the exposed part.Multiple parts can be targeted by separating names with commas, e.g.,
::part(header, footer).
In this example, the ::part() pseudo-element is used to style the title and content parts of the <my-card> Web Component. Even though these elements are inside the shadow DOM, they are styled externally without breaking encapsulation.
Use
partattributes inside Web Components to expose only the elements intended for external styling.Combine
::part()with CSS variables for flexible theming and styling.Avoid exposing unnecessary internal elements to preserve encapsulation.
Test across browsers, as support for
::part()may vary slightly in older versions.